<script setup lang="ts">
import { ref } from 'vue'
import lightoff from './assets/light_off.svg'
import lighton from './assets/light_open.svg'

const isOn = ref(false)
const changeImage = ()=>{
    isOn.value = !isOn.value
  }
</script>


<template>
  <!-- <button @click="changeImage()" :style="{backgroundColor: isOn ? 'red' : 'green'}">点击切换</button> -->
  <button @click="changeImage()">点击切换</button>
    <!-- 
    属性动态绑定语法
      1. 属性前面添加 v-bind: 实现属性的动态绑定
      2. v-bind 可省略，保留冒号 : 即可 
   -->
 <!-- 三元表达式：动态绑定资源 -->
 <img :src="isOn ? lighton : lightoff " alt="">
 <!-- 三元表达式：动态绑定类名 -->
  <p :class="isOn ? 'isActive': ''">{{ isOn }}</p>
   <!-- 对象的写法绑定类名：{ 类名: 条件 }，如果条件为真就添加类型 -->
  <p :class="{isActive:isOn}">{{ isOn }}</p>
  <!-- <img v-bind:src="isOn ? lighton : lightoff " alt=""> -->
   
   <!-- :style 动态绑定样式，传入样式对象 -->
   <p :style="{ backgroundColor: isOn ? 'red' : '' }">动态绑定 style</p>
</template>

<style>
.isActive{
  background-color: gold;
  
}
</style>
